import { Button, Col, Card, Tree, message, Drawer, Form, Input, Row, Select, Space } from 'antd';
import axios from 'axios';
import { useEffect, useState } from 'react';
const { Option } = Select;
const CreateRole = (props) => {

    const [form] = Form.useForm();

    const [open, setOpen] = useState(false);
    const [expandedKeys, setExpandedKeys] = useState([]);
    const [checkedKeys, setCheckedKeys] = useState([]);
    const [autoExpandParent, setAutoExpandParent] = useState(true);

    useEffect(() => {
        console.log(props)
        setOpen(props.open)
        return () => {
        }
    }, [props.open]);

    const onClose = () => {
        setOpen(false)
        props.setShowCreateRole(false)
    };

    const onSave = () => {
        console.log("onSave")
        form
            .validateFields()
            .then(values => {
                onSubmit(values);
                form.resetFields();
            })
            .catch(info => {
                console.log('Validate Failed:', info);
            });
    };

    const onSubmit = (value) => {
        setOpen(false)
        props.setShowCreateRole(false)
        saveAndGet(value);
    }
    async function saveAndGet(value) {
        try {
            props.setLoding(true)
            value.rights = checkedKeys;
            await axios.post("http://192.168.2.3:3000/roles", value).then(
                response => {
                    console.log(response)
                    if (response.status === 201) {

                        message.success('保存成功');
                        //异步获取新的角色数据

                    } else {
                        message.error('保存失败');
                    }
                })
                .catch(error => {
                    message.error('保存失败');
                });
            const get = await axios.get("http://192.168.2.3:3000/roles");
            const getRes = get.data;
            console.log("getRes", getRes)
            props.setList(getRes)
            props.setLoding(false)

        } catch (error) {
            console.error(error);
        }
    }

    const onExpand = (expandedKeysValue) => {
        console.log('onExpand', expandedKeysValue);
        // if not set autoExpandParent to false, if children expanded, parent can not collapse.
        // or, you can remove all expanded children keys.
        setExpandedKeys(expandedKeysValue);
        setAutoExpandParent(false);
    };
    const onCheck = (checkedKeysValue) => {
        console.log('onCheck', checkedKeysValue);
        setCheckedKeys(checkedKeysValue);
    };


    return (
        <>
            <Drawer
                title="角色创建"
                width={720}
                onClose={onClose}
                open={open}
                bodyStyle={{
                    paddingBottom: 80,
                }}

                extra={
                    <Space>
                        <Button onClick={onClose}>取消</Button>
                        <Button type="primary" onClick={onSave} >
                            保存
                        </Button>
                    </Space>
                }
            >
                <Form layout="vertical"
                    form={form}
                    autoComplete="off" >
                    <Row >
                        <Col span={12}>
                            <Form.Item
                                name="roleName"
                                label="名称"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入角色名称',
                                    },
                                ]}
                            >
                                <Input placeholder="请输入角色名称" />
                            </Form.Item>
                        </Col>

                    </Row>


                    <Row >
                        <Col span={24}>
                            <Form.Item
                                name="description"
                                label="角色描述"
                                rules={[
                                    {
                                        required: false,
                                        message: '请输入...',
                                    },
                                ]}
                            >
                                <Input.TextArea rows={4} placeholder="请输入..." />
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
                <div style={{ 'padding-bottom': '8px' }}>角色权限</div>
                <div
                    style={{ padding: 1, borderRadius: 8, backgroundColor: '#d9d9d9' }}
                >
                    < Tree
                        style={{
                            paddingTop: '20px',
                            paddingLeft: '5px',
                           // height: '450px',
                            //overflow: 'auto',
                            textAlign: 'center'
                        }}
                        checkable
                        onExpand={onExpand}
                        expandedKeys={expandedKeys}
                        autoExpandParent={autoExpandParent}
                        onCheck={onCheck}
                        checkedKeys={checkedKeys}
                        treeData={props.treeData}
                    />
                </div>

            </Drawer>

        </>
    );
};
export default CreateRole;